import React , { useState ,FC } from 'react'
import { Outlet } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import { mainRoute } from '../View/RouteConfig'
const { Header, Content, Footer, Sider } = Layout;





function Home(){

    const [collapsed, setCollapsed] = useState(false);
    return (
        <div className='Home'>
            <Layout>
                <Sider  breakpoint="lg" collapsedWidth="0" >
                {/* <div className="logo" /> */}
                <Menu
                    theme="dark" mode="inline"
                    defaultSelectedKeys={['4']}
                    items={mainRoute.map(
                        (item, index) => ({
                            key: String(index),
                            icon: React.createElement(item.icon),
                            label:item.txt,
                        }),
                    )}
                />
                </Sider>
                <Layout>
                    <Content style={{ margin: '24px 16px 0', }}>
                        <div className="site-layout-background"  style={{  minHeight: 360, }}>
                            <Outlet></Outlet>
                        </div>
                    </Content>
                </Layout>
            </Layout>
            
        </div>
    )
}

export default Home